<template>
  <div class="info-view">
    <BaseBox>
      <template #title>
        <BaseTitle>用户信息</BaseTitle>
      </template>
      <template>
        <!-- 头像 -->
        <img class="icon" :src="ui.photo" alt="" />
        <!-- 昵称 -->
        <h4>{{ ui.name }}</h4>
        <!-- 个性签名 -->
        <p>
          <span>{{ ui.intro }}</span>
        </p>
        <!-- 手机号 -->
        <p><span>手机:</span>{{ ui.mobile }}</p>
        <!-- 性别 -->
        <p><span>性别:</span> {{ ui.gender===0 ? '男' : '女'  }}</p>
        <!-- 生日 -->
        <p><span>生日:</span>{{ ui.birthday | formatTime }}</p>
      </template>
    </BaseBox>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { mapState } from "vuex";
export default {
  name: "InfoView",
  filters: {
    formatTime(time) {
      return dayjs(time).format("YYYY年MM月DD日");
    },
  },
  computed: {
    // 合并到计算属性中
    // 数组中的名字 需要和 state中的字段 同名
    ...mapState(["userInfo"]),
    // 起别名 key:value key是别名 value是vuex中state的值
    ...mapState({
      ui: "userInfo",
    }),
  },
};
</script>

<style lang="less" scoped>
.base-box {
  max-width: 500px;
}
.info-view {
  text-align: center;
  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #a6dbff;
    margin-bottom: 10px;
  }
  h4 {
    margin-bottom: 20px;
    font-weight: 500;
  }
  p {
    text-align: left;
    margin-bottom: 5px;
    span {
      display: inline-block;
      margin-right: 20px;
      color: #808080;
      font-weight: 900;
    }
  }
}
</style>
